<style lang="scss" scoped>
	.plogin{
		@include n-row2;
		width: 100%;
		height: 100%;
		background: $theme-bg-white4;
		.plogin-main{
			border-radius: 20px;
			overflow: hidden;
			max-width: 1370px;
			max-height: 950px;
			width: 90%;
			height: 90%;
			@include n-row1;
			align-items: stretch;
			background: $theme-bg-white1;
		}
		.plogin-left{
			background: $theme-color;
			width: 50%;
			@include n-col1;
			align-items: stretch;
			padding: 75px 90px;
			color: #fff;
			>header{
				@include n-row1;
				font-size: 30px;
				gap:15px;
				>i{
					border-radius: 10px;
					@include n-row2;
					width: 50px;
					height: 50px;
					font-weight: bold;
					font-size: 22px;
					color: $theme-color;
					background: #fff;
				}
			}
			>article{
				margin-top: 40px;
				line-height: 1.4;
				font-size: 36px;
			}
			>img{
				margin-top: auto;
				align-self: center;
				height: 340px;
			}
		}
		.plogin-right{
			width: 50%;
			padding-top: 10%;
			>h1{
				font-size: 23px;
				@include n-row2;
				color: $theme-text2;
			}
		}
		.plogin-form{
			max-width: 410px;
			margin: 0 auto;
			margin-top: 40px;
			.plogin-form-item{
				margin-bottom: 30px;
				>p{
					line-height: 1;
					font-size: 13px;
					margin-bottom: 10px;
					color: $theme-text5;
				}
				::v-deep >.el-input{
					width: 100%;
					input{
						border-radius: 10px;
					}
				}
			}
			.plogin-form-oper{
				@include n-row5;
				font-size: 15px;
				color: $theme-text5;
				>span:hover{
					color: $theme-color;
					cursor: pointer;
				}
			}
			.plogin-form-oper2{
				@include n-row2;
				margin-top: 22px;
				color: $theme-color;
				>span{
					cursor: pointer;
					:hover{
						opacity: 0.7;
					}
				}
			}
			.plogin-form-btn{
				margin-top: 50px;
				@include n-row2;
				>button{
					width: 175px;
				}
			}
		}
	
		.plogin-ok{
			height: 100%;
			width: 100%;
			@include n-col1;
			align-items: center;
			padding-top:20%;
			>img{
				width: 40%;
			}
			>p{
				font-size: 20px;
				color: $theme-text2;
				font-weight: bold;
				margin-top: 20px;
			}
			>button{
				margin-top: 40px;
			}
		}
	}
	
</style>

<template>
	<div class="plogin" >
		<div class="plogin-main">
			<aside class="plogin-left">
				<header><i>智</i>脑云拓</header>
				<article>企业服务中心</article>
				
				<img src="@/assets/img/2.png" />

			</aside>
			
			<article class="plogin-right">
				<h1 v-show="page === 'login'">欢迎登录</h1>
				
				<ul class="plogin-form" v-show="page === 'login'">
					<li class="plogin-form-item">
						<p>用户名</p>
						<el-input v-model="form.username" placeholder="请输入用户名" />
					</li>
					<li class="plogin-form-item">
						<p>密码</p>
						<el-input type="password" v-model="form.password" placeholder="请输入密码" />
					</li>
					
					<li class="plogin-form-oper">
						<n-checkbox v-model="form.remember" >记住我</n-checkbox>
						<span>忘记密码？</span>
					</li>
					
					<li class="plogin-form-btn"><el-button :loading="loading" type="primary" @click="login">立即登录</el-button></li>
					
					<li class="plogin-form-oper2"><span @click="page = 'reg'">还没有账号？去注册</span></li>
				</ul>
				
				
				<h1 v-show="page === 'reg'">欢迎注册</h1>
				<ul class="plogin-form" v-show="page === 'reg'">
					<li class="plogin-form-item">
						<p>用户名</p>
						<el-input v-model="form.username" placeholder="请输入用户名" />
					</li>
					<li class="plogin-form-item">
						<p>密码</p>
						<el-input type="password" v-model="form.password" placeholder="请输入密码" />
					</li>
					<li class="plogin-form-item">
						<p>确认密码</p>
						<el-input type="password" v-model="form.password2" placeholder="请确认密码" />
					</li>
					
					<li class="plogin-form-btn"><el-button :loading="loading" type="primary" @click="register">立即注册</el-button></li>
					
					<li class="plogin-form-oper2"><span @click="page = 'login'">已有账号？去登录</span></li>
				</ul>
				
				
				<div class="plogin-ok" v-show="page === 'regOk'">
					<img src="@/assets/img/2.png" />
					<p>恭喜你，注册成功</p>
					<el-button type="primary" @click="page = 'login'">去登录</el-button>
				</div>
				
			</article>
			
		</div>
		
	</div>
</template>

<script>
	export default {
		data(){
			return{
				page:'login',
				loading:false,
				form:{
					username:'',
					password:'',
					uid: this.$store.shareId,
          // MXJmxj329555407
					password2:'',
					remember:true,
					agent:1,
				},
			
			}
		},
		mounted(){
			if(this.$auth.isLogin()) this.$router.push(this.$route.query.redirect || '/')
		},
		beforeDestroy(){
		},
		methods:{
			async register(){
				const {username,password,password2} = this.form;
				if(!username) return this.$msg('请输入账号',2)
				if(!password) return this.$msg('请输入密码',2)
				if(password !== password2) return this.$msg('两次密码不一致',2)
				const res = await this._req( this.$api.user.register(this.form) );
				if(res)this.page = 'regOk'
			},
			async login(){
				const {username,password} = this.form;
				if(!username) return this.$msg('请输入账号',2)
				if(!password) return this.$msg('请输入密码',2)
				const res = await this._req( this.$auth.login(this.form) );
				if(!res) return;
				this.$msg('登录成功')
				this.$router.push(this.$route.query.redirect || '/')
			},
		}
	}
	
	
</script>